{% extends 'base.html' %}
{% block title %}
<title>个人信息</title>
{% endblock %}



{% block css %}
  <style>
    .head{
      width: 100px;
      height: 100px;
      position: relative;

    }
    .head input{
      width: 100px;
      height: 100px;
      position: absolute;
      z-index: 2;
      opacity: 0;
    }
    .head img{
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
      border-radius: 50%;
    }
  </style>
{% endblock %}


{% block js %}
<script>
  window.onload = function(){
    let head_input = document.querySelector(".head input");
    let head_img = document.querySelector(".head img");
    head_input.onchange = function(){
              const file = head_input.files[0];
              if (file) {
                  const reader = new FileReader();
                  reader.onload = function (e) {
                      head_img.src = e.target.result; 
                    }
                    reader.readAsDataURL(file);
                  }
                }
            }
</script>
{% endblock %}


{% block body %}

    <div class="panel panel-default">
      <div class="panel-body">
        {{ request.user.username }}

            <div class="row">
                <div class="col-sm-6 col-sm-offset-3">
                    <form action="" method="post" ENCTYPE="multipart/form-data">
                       {% csrf_token %}
                        <div class="form-group">
                          {{ psf.head.label_tag }}
                          <div class="head">
                            {{ psf.head }}
                            <img src="/media/{{ request.user.head }}">
                          </div>

                        </div>
                      <div class="form-group">
                          {{ psf.username.label_tag }}
                          {{ psf.username }}

                      </div>
                      <div class="form-group">
                          {{ psf.email.label_tag }}
                          {{ psf.email }}

                      </div>
                      <div class="form-group">
                          {{ psf.last_name.label_tag }}
                          {{ psf.last_name }}

                      </div>
                      <div class="form-group">
                          {{ psf.first_name.label_tag }}
                          {{ psf.first_name }}

                      </div>
                       {% for field in psf %}
                            {% if field.errors %}
                                {% for e in field.errors %}
                                    <p class="text-danger">{{ e }}</p>
                                {% endfor %}
                            {% endif %}
                        {% endfor %}
                      <button type="submit" class="btn btn-default">修改</button>
                    </form>
                </div>
            </div>
      </div>
    </div>
{% endblock %}